<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <!--    react 核心库-->
    <script type="text/javascript" src="../yl/react.development.js"></script>
    <!--    用于支持react操作dom-->
    <script type="text/javascript" src="../yl/react-dom.development.js"></script>
    <!--    用于将jsx 转为 js-->
    <script type="text/javascript" src="../yl/babel.min.js"></script>
    <!--    用于对组件标签进行限制-->
    <script type="text/javascript" src="../yl/prop-types.js"></script>

</head>
<body>

<div id="app"></div>
<script type="text/babel">
    class Login extends React.Component {
        //定义默认状态
        state={
            username : '',
            password:''
        }
        //handle处理 Submit处理 相应这次提交。
        handleSubmit = (event) => {
            //阻止默认事件
            event.preventDefault();
            const {username, password} = this
            console.log({'账号：':username.value, '密码：':password.value})
        }
        saveUserName =(event)=>{
            this.setState({username:event.target.value})
        }
        savePassword=(event)=>{
            this.setState({password:event.target.value})
        }
        render() {
            return (
                <form action="www.baidu.com" onSubmit={this.handleSubmit}>

                    用户名:<input onChange={this.saveUserName} ref={c=>this.username=c} name="username" type="text"/><br/>
                    密码:<input onChange={this.savePassword} ref={c=>this.password=c} name="password" type="password"/>
                    <button>登录</button>
                </form>
            )
        }
    }

    ReactDOM.render(< Login/>, document.getElementById('app'))
</script>
</body>
</html>
